<template>
  <div class="songhuo">
    <ul class="songhuo-a1" @click="tellUs">
      <li>
        <a href="javascript:;">
          <img
            src="https://kaola-haitao.oss.kaolacdn.com/79d56b54-ac24-410e-81cb-ec3861abf2a6_100_100.png?x-oss-process=image/resize,w_75,h_0/quality,q_95"
            alt
          />
          <div>代付款</div>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img
            src="https://kaola-haitao.oss.kaolacdn.com/908ac13b-f182-4d43-a537-2c3dc62a7d71_100_100.png?x-oss-process=image/resize,w_75,h_0/quality,q_95"
            alt
          />
          <div>代发货</div>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img
            src="https://kaola-haitao.oss.kaolacdn.com/357bd1a8-5c33-45e8-b667-e95543774d2e_100_100.png?x-oss-process=image/resize,w_75,h_0/quality,q_95"
            alt
          />
          <div>代收货</div>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img
            src="https://kaola-haitao.oss.kaolacdn.com/e2dc467f-47f3-4df9-853f-31649873e6da_100_100.png?x-oss-process=image/resize,w_75,h_0/quality,q_95"
            alt
          />
          <div>退款退货</div>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img
            src="https://kaola-haitao.oss.kaolacdn.com/f29c6d37-aa7e-41ef-81a8-69a754e6f883_100_100.png?x-oss-process=image/resize,w_75,h_0/quality,q_95"
            alt
          />
          <div>全部订单</div>
        </a>
      </li>
    </ul>
    <ul class="songhuo-a2" @click="tellUs">
      <li>
        <a href="javascript:;">
          <img
            src="https://kaola-haitao.oss.kaolacdn.com/c82eebb9-30c8-46eb-866c-bd040a23849b_88_88.png?x-oss-process=image/resize,w_60,h_0/quality,q_60"
            alt
          />
          <span>优惠券</span>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img
            src="https://kaola-haitao.oss.kaolacdn.com/21043ae9-48f3-44ec-afe6-60d195307fe3_88_88.png?x-oss-process=image/resize,w_60,h_0/quality,q_60"
            alt
          />
          <span>红包</span>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img
            src="https://kaola-haitao.oss.kaolacdn.com/e442c5b1-9d78-41ed-99c6-56638712c2f5_88_88.png?x-oss-process=image/resize,w_60,h_0/quality,q_60"
            alt
          />
          <span>考拉豆</span>
        </a>
      </li>
    </ul>
    <ul class="songhou-a3" @click="tellUs">
      <li>
        <a href="javascript:;">
          <img
            src="https://kaola-haitao.oss.kaolacdn.com/4da513e7-6af0-4d18-8d17-56b6322ed66a_120_120.png?x-oss-process=image/resize,w_90,h_0/quality,q_60"
            alt
          />
          <span>收藏</span>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img
            src="https://kaola-haitao.oss.kaolacdn.com/e21990bb-fdda-40df-a34a-68ca3ce9825c_120_120.png?x-oss-process=image/resize,w_90,h_0/quality,q_60"
            alt
          />
          <span>领劵中心</span>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img
            src="https://kaola-haitao.oss.kaolacdn.com/cba53bd4-6074-4856-8acd-7fe139de63e0_120_120.png?x-oss-process=image/resize,w_90,h_0/quality,q_60"
            alt
          />
          <span>会员中心</span>
        </a>
      </li>
      <li>
        <a hhref="javascript:;">
          <img
            src="https://kaola-haitao.oss.kaolacdn.com/28f02d74-de14-4c48-8e27-26089bc8042b_120_120.png?x-oss-process=image/resize,w_90,h_0/quality,q_60"
            alt
          />
          <span>app下载</span>
        </a>
      </li>
    </ul>
    <div class="songhou-a4">
      <div class="a4-aaa">考拉承诺 | 正品保障</div>
      <div class="a4-bbb">12项保障</div>
      <div class="a4-ccc">
        <img
          src="https://kaola-haitao.oss.kaolacdn.com/54826f63-618c-48a8-8004-3874a528a81d_28_28.png?x-oss-process=image/resize,w_42,h_0/quality,q_95"
          alt
        />
        <span>考拉自营</span>
        <img
          src="https://kaola-haitao.oss.kaolacdn.com/1faf73f7-a803-43c5-b536-c7b8adc6e0de_28_28.png?x-oss-process=image/resize,w_42,h_0/quality,q_95"
          alt
        />
        <span>全球直采</span>
        <img
          src="https://kaola-haitao.oss.kaolacdn.com/29af6510-caf1-4fc4-bdad-2a4ed7f31035_28_28.png?x-oss-process=image/resize,w_42,h_0/quality,q_95"
          alt
        />
        <span>假一赔十</span>
        <img
          src="https://kaola-haitao.oss.kaolacdn.com/581c9935-f4cc-42fa-b790-2e8b9d4fb682_28_28.png?x-oss-process=image/resize,w_42,h_0/quality,q_95"
          alt
        />
        <span>售后无忧</span>
      </div>
      <div class="a4-ddd">
        <a href="#">查看详情</a>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Dialog } from "vant";
// 全局注册
Vue.use(Dialog);

export default {
  data() {
    return {
      show: false,
    };
  },
  mounted() {},
  methods: {
    tellUs() {
      Dialog.alert({
        title: "想体验更多功能",
        message: "请充值",
      }).then(() => {
        // on close
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.songhuo {
  position: relative;
  padding: 0 11px;
  bottom: -140px;
  width: 414px;
  height: 326px;
  z-index: 30;
}
.songhuo-a1 {
  height: 82px;
  margin-bottom: 12.5px;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  li {
    -webkit-box-flex: 1;
    flex: 1;
    text-align: center;
    margin: 20px 0px 17px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #333;
    position: relative;
    a {
      img {
        margin-left: 26px;
        width: 25px;
        margin-bottom: 6.5px;
      }
    }
  }
}
.songhuo-a2 {
  height: 70px;
  background-color: #fff;
  display: flex;
  border-radius: 4px;
  margin-bottom: 12.5px;
  li {
    flex: 1;
    text-align: center;
    margin: 16px 0 12px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #333;
    -webkit-box-flex: 1;
    a {
      img {
        width: 20px;
        margin-bottom: 5px;
        margin-left: 54px;
      }
    }
  }
}

.songhou-a3 {
  height: 80px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 12.5px;
  display: flex;
  li {
    -webkit-flex: 1;
    flex: 1;
    text-align: center;
    margin: 14px 0;
    font-family: PingFangSC-Regular;
    font-size: 11px;
    a {
      img {
        width: 30px;
        margin-bottom: 6px;
        margin-left: 35px;
      }
    }
  }
}

.songhou-a4 {
  height: 40px;
  background-color: #fff;
  padding: 9px;
  position: relative;
  border-radius: 5px;
  .a4-aaa {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: red;
    font-weight: 700;
  }
  .a4-bbb {
    font-family: PingFangSC-Regular;
    font-size: 10px;
    color: #999;
    position: absolute;
    right: 9px;
    top: 10px;
  }
  .a4-ccc {
    font-family: PingFangSC-Regular;
    color: #999;
    text-align: left;
    width: 85%;
    margin-top: 3px;
    height: 18px;
    img {
      margin-right: 3px;
      width: 14px;
      height: 14px;
      vertical-align: middle;
      float: left;
    }
    span {
      font-size: 10px;
      margin-right: 7px;
      float: left;
      vertical-align: middle;
    }
  }
  .a4-ddd {
    background-image: linear-gradient(270deg, #ff4e77, red);
    border-radius: 10px;
    font-family: PingFangSC-Regular;
    font-size: 11px;
    text-align: center;
    line-height: 18px;
    width: 60px;
    height: 18px;
    position: absolute;
    right: 9px;
    bottom: 9px;
    a {
      color: white;
    }
  }
}
</style>
